<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
	<meta name='copyright' content='copyright 2012 nader hassan' />
	<link rel='shortcut icon' href='' type='image/x-icon' />
	<title>Interface graphique</title>
	<link href='css/main.css' rel='stylesheet' type='text/css' media='screen' />
	<script language="Javascript" src="clock.js"></script>
</head>
<body onload="startTime()" >
	<div id="header" align="center">
		<table cellspacing="20">
			<tr>
				<td><center><img width="80" src="icones/retour_white.svg"></img></center></td>
				<td><center><a href="#" onclick="closeAll();"><img width="80" src="icones/home_white.svg"></a></img></center></td>
				<td class="mod" id="hour" ></td>
				<td><center><img width="80" src="icones/contrast_white.png"></img></center></td>
				<td class="mod"><center><a href="index.php?zoom=yes" >A+</a><br/>
				<a href="index.php?zoom=no" >a-</a></center></td>
			</tr>
			<tr>
				<td class="mod"><font size={$size_text}>Retour</font></td>
				<td class="mod"><font size={$size_text}><a href="#" onclick="closeAll();">Accueil</a></font></td>
				<td><!-- Heure --></td>
				<td class="mod"><font size={$size_text}>Contraste</font></td>
				<td class="mod"><font size={$size_text}>Zoom</font></td>
			</tr>
		</table>
	</div>
	<div id="main">
		<table id="menu" cellspacing="20">
			<tr>
				<td><center><img width={$size_img} src="icones/arrow_white.svg"></img></center></td>
				<td id="choix"><font size={$size_text}><a href="#" onclick="show('selection_content');">S&eacute;lection du foyer</a></font></td>
			</tr>
			<tr>
				<td><center><img width={$size_img} src="icones/power_white.svg"></img></center></td>
				<td id="choix"><font size={$size_text}><a href="#" onclick="show('puissance_content');">Puissance</a></font></td>
			</tr>
			<tr>
				<td><center><img width={$size_img} src="icones/chrono_white.svg"></img></center></td>
				<td id="choix"><font size={$size_text}><a href="#" onclick="show('timer_content');">Minuteur</a></font></td>
			</tr>
			<tr>
				<td><center><img width={$size_img} src="icones/arrow_white.svg"></img></center></td>
				<td id="choix"><font size={$size_text}><a href="#" onclick="show('lock_content');">V&eacute;rrouiller les foyers</a></font></td>
			</tr>
			<tr>
				<td><center><img width={$size_img} src="icones/arrow_white.svg"></img></center></td>
				<td id="choix"><font size={$size_text}><a href="#" onclick="show('heat_content');">D&eacute;tection de la chaleur</a></font></td>
			</tr>
			
			<!--
				Par defaut afficher les plaques activees 
				Allumer / Eteindre 
				Detecter chaleur
				Lock plaques
			-->
		</table>
	</div>
	<div id="content">
		<div id="selection_content" style="display: none">
			<h1>Veuillez s&eacute;lectionner un foyer </h1>
		</div>
		<div id="puissance_content" style="display: none">
			<h1>Veuillez s&eacute;lectionner la puissance du foyer</h1>
		</div>
		<div id="timer_content" style="display: none">
			<h1>Veuillez s&eacute;lectionner le temps de cuisson</h1>
		</div>
		<div id="lock_content" style="display: none">
			<h1>Veuillez s&eacute;lectionner le foyer &agrave; v&eacute;rrouiller</h1>
		</div>
		<div id="heat_content" style="display: none">
			<h1>Voici les plaques encore chaude</h1>
		</div>
	</div>
</body>
</html>